﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>EzDroid</title>
    <link href="../Styles/site.css" rel="stylesheet" type="text/css" />
    <link href="../Styles/jquery.mobile-1.0b2.css" rel="stylesheet" type="text/css" />
    <link href="../Styles/jquery.contextmenu.css" rel="stylesheet" type="text/css" />
    <link href="../Styles/scrollbar.css" rel="stylesheet" type="text/css" />
    <link href="../Styles/ui.button.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/lib/jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="../Scripts/lib/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>
    <script src="../Scripts/lib/jquery.mobile-1.0b2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var count = $(".fit-panel").length;
            var width = $(document.body).width();
            var isMoving = false, originalX = 0, endX = 0, currentPanel = 1;
            function resetPanel(moveDiff) {
                var width = $(document.body).width();

                $(".fit-panel").each(function (index, item) {
                    var $item = $(item); var order = $item.attr('data-order');
                    var diff = (order - currentPanel) * width - moveDiff;
                    $item.css({ webkitTransform:
            "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, " + diff + ", 0, 0, 1)"
                    });
                })
            }
            function moveLeft() {
                if (currentPanel > 0) {
                    currentPanel--;
                    changeTabNormal(currentPanel);
                }
                if (currentPanel == 0) changeTabLeftest(currentPanel);

                resetPanel(0);

            }
            function moveRight() {
                if (currentPanel < count - 1) {
                    currentPanel++;
                    changeTabNormal(currentPanel);
                }
                if (currentPanel == count - 1) changeTabRightest(currentPanel);

                resetPanel(0);
            }

            var tabContent = {
                "-1": "",
                "0": "联系人",
                "1": "消息",
                "2": "项目",
                "3": ""
            }

            function setTabItemContent(count) {
                $('.tabs-under').find('.tab-left').find('.tab-content').html(tabContent[count - 1]);
                $('.tabs-under').find('.tab-right').find('.tab-content').html(tabContent[count + 1]);
            }

            function changeTabNormal(count) {
                $('.tabs-under').find('.tab-right').show();
                $('.tabs-under').find('.tab-left').show();

                setTabItemContent(count);
            }

            function changeTabRightest(count) {
                $('.tabs-under').find('.tab-right').hide();

                setTabItemContent(count);
            }


            function changeTabLeftest(count) {
                $('.tabs-under').find('.tab-left').hide();

                setTabItemContent(count);
            }

            resetPanel(0);

            $(document).bind('touchstart', function (e) {
                originalX = window.event.touches[0].pageX;
            }).bind('touchmove', function (e) {
                e.preventDefault(); endX = window.event.touches[0].pageX;
                var diffX = originalX - endX;
                if (!isMoving) {
                    if (Math.abs(diffX) < 30) return;
                    isMoving = true;
                } resetPanel(diffX);
            }).bind('touchend', function (e) {
                isMoving = false;
                if ((originalX - endX) > width / 2) {
                    moveRight();
                }
                else if ((endX - originalX) > width / 2) {
                    moveLeft();
                } else resetPanel(0);
            }).swipeleft(function () {
                moveRight();
            }).swiperight(function () {
                moveLeft();
            });
        }); </script>
</head>
<body>
    <div data-role="page" class="type-interior ui-page ui-body-c
ui-page-active">
        <div data-role="header" data-theme="a" class="ui-bar-f ui-header" role="banner">
            <div tabindex="0" role="heading" aria-level="1">
                <span class="header-title">Ezdesk</span>
                <div class="head-button" style="left: 10px;">
                </div>
                <div class="img-button">
                    <img src="../Styles/pencil.png" style="width: 28px; height: 28px;" />
                </div>
            </div>
        </div>
        <div class="tabs-under">
            <div class="tabs-arrow">
                <div id="arrow">
                </div>
            </div>
            <div class="tab-left">
                <span class="txt-item"> < <span class="tab-content">联系人</span>
                </span>
            </div>
            <div class="tab-right">
                <span class="txt-item"><span class="tab-content">项目</span> > </span>
            </div>
        </div>
        <div id="yellow" class="fit-panel" data-order="0">
            <div class="tabs">
                <div class="tab-current ">
                    <span class="txt-item">联系人</span>
                </div>
            </div>
            <div class="contacts" data-role="content" class="ui-content" role="main">
                <div class="content-primary">
                    <ul data-role="listview" data-split-icon="gear" data-split-theme="d" class=" ui-listview ">
                        <li data-theme="c" class="ui-btn ui-btn-up-c
ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb">
                            <div class="ui-btn-inner
ui-li ui-li-has-alt">
                                <div class="ui-btn-text">
                                    <a class="ui-link-inherit">
                                        <img src="../Styles/Photos2.png" class="ui-li-thumb">
                                        <h3 class="ui-li-heading">
                                            Broken Bells</h3>
                                        <p class="ui-li-desc">
                                            Broken Bells</p>
                                    </a>
                                </div>
                                <span class="ui-btn-text"></span><span class="ui-icon ui-icon-gear ui-icon-shadow">
                                </span>
                            </div>
                        </li>
                        <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-btn-up-c">
                            <div class="ui-btn-inner ui-li ui-li-has-alt">
                                <div class="ui-btn-text">
                                    <a class="ui-link-inherit">
                                        <img src="../Styles/Safari.png" class="ui-li-thumb">
                                        <h3 class="ui-li-heading">
                                            Warning</h3>
                                        <p class="ui-li-desc">
                                            Hot Chip</p>
                                    </a>
                                </div>
                            </div>
                            <span class="ui-btn-text"></span><span class="ui-icon ui-icon-gear ui-icon-shadow">
                            </span></li>
                        <li data-theme="c" class="ui-btn
ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-btn-hover-c">
                            <div class="ui-btn-inner
ui-li ui-li-has-alt">
                                <div class="ui-btn-text">
                                    <a class="ui-link-inherit">
                                        <img src="../Styles/Notes2.png" class="ui-li-thumb">
                                        <h3 class="ui-li-heading">
                                            Wolfgang Amadeus Phoenix</h3>
                                        <p class="ui-li-desc">
                                            Phoenix</p>
                                    </a>
                                </div>
                            </div>
                            <span class="ui-btn-text"></span><span class="ui-icon ui-icon-gear ui-icon-shadow">
                            </span></li>
                        <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb
ui-btn-up-c">
                            <div class="ui-btn-inner ui-li ui-li-has-alt">
                                <div class="ui-btn-text">
                                    <a class="ui-link-inherit">
                                        <img src="../Styles/Pandora.png" class="ui-li-thumb">
                                        <h3 class="ui-li-heading">
                                            Of The Blue Colour Of The Sky</h3>
                                        <p class="ui-li-desc">
                                            Ok Go</p>
                                    </a>
                                </div>
                            </div>
                            <span class="ui-btn-text"></span><span class="ui-icon
ui-icon-gear ui-icon-shadow"></span></li>
                        <li data-theme="c" class="ui-btn ui-btn-icon-right
ui-li ui-li-has-alt ui-li-has-thumb ui-btn-up-c">
                            <div class="ui-btn-inner ui-li
ui-li-has-alt">
                                <div class="ui-btn-text">
                                    <a class="ui-link-inherit">
                                        <img src="../Styles/Phone.png" class="ui-li-thumb">
                                        <h3 class="ui-li-heading">
                                            Elephant</h3>
                                        <p class="ui-li-desc">
                                            The White Stripes</p>
                                    </a>
                                </div>
                            </div>
                            <span class="ui-btn-text"></span><span class="ui-icon ui-icon-gear ui-icon-shadow">
                            </span></li>
                        <li data-theme="c" class="ui-btn
ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-btn-up-c">
                            <div class="ui-btn-inner
ui-li ui-li-has-alt">
                                <div class="ui-btn-text">
                                    <a class="ui-link-inherit">
                                        <img src="../Styles/Photos.png" class="ui-li-thumb">
                                        <h3 class="ui-li-heading">
                                            Kid A</h3>
                                        <p class="ui-li-desc">
                                            Radiohead</p>
                                    </a>
                                </div>
                            </div>
                            <span class="ui-btn-text"></span><span class="ui-icon ui-icon-gear ui-icon-shadow">
                            </span></li>
                        <li data-theme="c" class="ui-btn
ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-btn-up-c">
                            <div class="ui-btn-inner
ui-li ui-li-has-alt">
                                <div class="ui-btn-text">
                                    <a class="ui-link-inherit">
                                        <img src="../Styles/Remote.png" class="ui-li-thumb">
                                        <h3 class="ui-li-heading">
                                            XX</h3>
                                        <p class="ui-li-desc">
                                            XX</p>
                                    </a>
                                </div>
                            </div>
                            <span class="ui-btn-text"></span><span class="ui-icon ui-icon-gear ui-icon-shadow">
                            </span></li>
                        <li data-theme="c" class="ui-btn
ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb ui-btn-hover-c">
                            <div class="ui-btn-inner
ui-li ui-li-has-alt">
                                <div class="ui-btn-text">
                                    <a class="ui-link-inherit">
                                        <img src="../Styles/Notes2.png" class="ui-li-thumb">
                                        <h3 class="ui-li-heading">
                                            Wolfgang Amadeus Phoenix</h3>
                                        <p class="ui-li-desc">
                                            Phoenix</p>
                                    </a>
                                </div>
                            </div>
                            <span class="ui-btn-text"></span><span class="ui-icon ui-icon-gear ui-icon-shadow">
                            </span></li>
                        <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-thumb
ui-btn-up-c">
                            <div class="ui-btn-inner ui-li ui-li-has-alt">
                                <div class="ui-btn-text">
                                    <a class="ui-link-inherit">
                                        <img src="../Styles/Pandora.png" class="ui-li-thumb">
                                        <h3 class="ui-li-heading">
                                            Of The Blue Colour Of The Sky</h3>
                                        <p class="ui-li-desc">
                                            Ok Go</p>
                                    </a>
                                </div>
                            </div>
                            <span class="ui-btn-text"></span><span class="ui-icon
ui-icon-gear ui-icon-shadow"></span></li>
                    </ul>
                </div>
                <!--/content-primary -->
            </div>
            <!-- /content -->
            <div data-role="footer" class="ui-footer ui-bar-c" role="contentinfo">
                <div style="text-align: center">
                    <div data-role="controlgroup" data-type="horizontal" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
                        <a data-role="button" class="ui-btn ui-btn-icon-left ui-corner-left ui-btn-up-c"><span
                            class="ui-btn-inner ui-corner-left"><span class="ui-btn-text">分组</span><span class="ui-icon ui-icon-arrow-u ui-icon-shadow"></span></span></a>
                        <a data-role="button" class="ui-btn ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner">
                            <span class="ui-btn-text">同事</span><span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span></span></a>
                    </div>
                </div>
            </div>
            <!-- /footer -->
        </div>
        <div id="blue" class="fit-panel" data-order="1">
            <div class="tabs">
                <div class="tab-current ">
                    <span class="txt-item">消息</span>
                </div>
            </div>
            <div class="feeds" data-role="content" class="ui-content" role="main">
                <div class="content-primary">
                    <ul data-role="listview" class="ui-listview feed-list">
                        <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-b
ui-btn-up-undefined">星期四 2011-08-04 </li>
                        <li data-theme="c" class="ui-btn ui-btn-icon-right
ui-li ui-btn-up-c">
                            <div class="ui-btn-inner ui-li">
                                <div class="ui-btn-text">
                                    <div class="ui-link-inherit">
                                        <div class="ui-li-aside ui-li-desc ">
                                            <strong>17:14</strong></div>
                                        <h3 class="ui-li-heading title">
                                            <span><a class="ezlink" href="#"><span><span>我：123123</span></span></a></span></h3>
                                        <div class="ui-li-desc body">
                                            <span><span>“ 1231212312313123313112123”</span><br>
                                                <span>还没有人确认过。</span><a class="ezlink" href="#"><span></span></a></span></div>
                                        <div class="action-container">
                                            <div class="action-r">
                                                <a class="ezlink" href="#"><span>回复(0)</span></a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li data-theme="c" class="ui-btn ui-btn-icon-right
ui-li ui-btn-up-c">
                            <div class="ui-btn-inner ui-li">
                                <div class="ui-btn-text">
                                    <div class="ui-link-inherit">
                                        <div class="ui-li-aside ui-li-desc ">
                                            <strong>17:11</strong></div>
                                        <h3 class="ui-li-heading title">
                                            <span><a class="ezlink" href="#"><span>按时打算大时代22 项目更新</span></a></span></h3>
                                        <div class="ui-li-desc body">
                                            <span>黄冠 将项目描述修改为 爱仕达大速度<br>
                                            </span>
                                        </div>
                                        <div class="action-container">
                                            <div class="action-r">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li data-role="list-divider" role="heading" class="ui-li
ui-li-divider ui-btn ui-bar-b ui-btn-up-undefined">星期四 2011-08-04 </li>
                        <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
                            <div class="ui-btn-inner ui-li">
                                <div class="ui-btn-text">
                                    <div class="ui-link-inherit">
                                        <div class="ui-li-aside
ui-li-desc ">
                                            <strong>16:47</strong></div>
                                        <h3 class="ui-li-heading title">
                                            <span><a class="ezlink" href="#"><span>zxczxczcxxzc 项目更新</span></a></span></h3>
                                        <div class="ui-li-desc
body">
                                            <span></span>
                                        </div>
                                        <div class="action-container">
                                            <div class="action-r">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li data-role="list-divider" role="heading" class="ui-li ui-li-divider ui-btn ui-bar-b ui-btn-up-undefined">
                            星期四 2011-08-04 </li>
                        <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
                            <div class="ui-btn-inner ui-li">
                                <div class="ui-btn-text">
                                    <div class="ui-link-inherit">
                                        <div class="ui-li-aside ui-li-desc ">
                                            <strong>14:27</strong></div>
                                        <h3 class="ui-li-heading
title">
                                            <span><a class="ezlink" href="#"><span><span>我：123</span></span></a></span></h3>
                                        <div class="ui-li-desc body">
                                            <span><span>“123123”</span></span></div>
                                        <div class="action-container">
                                            <div class="action-r">
                                                <a class="ezlink" href="#"><span>回复(0)</span></a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li
ui-btn-up-c">
                            <div class="ui-btn-inner ui-li">
                                <div class="ui-btn-text">
                                    <div class="ui-link-inherit">
                                        <div class="ui-li-aside ui-li-desc ">
                                            <strong>14:25</strong></div>
                                        <h3 class="ui-li-heading
title">
                                            <span><a class="ezlink" href="#"><span>撒打算打算 项目更新</span></a></span></h3>
                                        <div class="ui-li-desc body">
                                            <span>黄冠 创建了项目</span></div>
                                        <div class="action-container">
                                            <div class="action-r">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
                            <div class="ui-btn-inner ui-li">
                                <div class="ui-btn-text">
                                    <div class="ui-link-inherit">
                                        <div class="ui-li-aside
ui-li-desc ">
                                            <strong>13:24</strong></div>
                                        <h3 class="ui-li-heading title">
                                            <span><a class="ezlink" href="#"><span><span>我：123</span></span></a></span></h3>
                                        <div class="ui-li-desc
body">
                                            <span><span>“asdadaadadadadaasdsdadasasdadad asda ”</span><br>
                                                <span>还没有人确认过。</span><a class="ezlink" href="#"><span></span></a></span></div>
                                        <div class="action-container">
                                            <div class="action-r">
                                                <a class="ezlink" href="#"><span>回复(0)</span></a></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--/content-primary -->
            </div>
            <!-- /content-->
        </div>
        <div id="red" class="fit-panel" data-order="2">
            <div class="tabs">
                <div class="tab-current ">
                    <span class="txt-item">项目</span>
                </div>
            </div>
            <div class="projects" data-role="content" class="ui-content" role="main">
                <div class="content-primary">
                    <ul data-role="listview" class=" ui-listview ">
                        <li data-theme="c" class="ui-btn
ui-btn-icon-right ui-li ui-btn-up-c">
                            <div class="ui-btn-inner ui-li">
                                <div class="div-workitem">
                                    <div class="txt-workitem-unfinished" style="height: 67%;">
                                    </div>
                                    <div class="txt-workitem-expired" style="height: 1%;">
                                    </div>
                                    <div class="txt-workitem-finished" style="height: 34%;">
                                    </div>
                                </div>
                                <div class="ui-btn-text">
                                    <div class="ui-li-aside ui-li-desc txt-diff">
                                        <strong>剩余31天</strong></div>
                                    <a href="index.html" class="ui-link-inherit">
                                        <h3 class="ui-li-heading">
                                            Stephen Weber</h3>
                                        <p class="ui-li-desc">
                                            Hey Stephen, if you're available at 10am tomorrow, we've got a meeting with the
                                            jQuery team.</p>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
                            <div class="ui-btn-inner
ui-li">
                                <div class="div-workitem">
                                    <div class="txt-workitem-unfinished" style="height: 36%;">
                                    </div>
                                    <div class="txt-workitem-expired" style="height: 4%;">
                                    </div>
                                    <div class="txt-workitem-finished" style="height: 60%;">
                                    </div>
                                </div>
                                <div class="ui-btn-text">
                                    <a href="index.html" class="ui-link-inherit">
                                        <h3 class="ui-li-heading">
                                            jQuery Team</h3>
                                        <p class="ui-li-desc">
                                            In preparation for the upcoming conference in Boston, we need to start gathering
                                            a list of sponsors and speakers.</p>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li ui-btn-up-c">
                            <div class="ui-btn-inner ui-li">
                                <div class="div-workitem">
                                    <div class="txt-workitem-unfinished" style="height: 1%;">
                                    </div>
                                    <div class="txt-workitem-expired" style="height: 1%;">
                                    </div>
                                    <div class="txt-workitem-finished" style="height: 101%;">
                                    </div>
                                </div>
                                <div class="ui-btn-text">
                                    <div class="ui-li-aside ui-li-desc txt-delaied">
                                        <strong>过期3天</strong></div>
                                    <a href="index.html" class="ui-link-inherit">
                                        <h3 class="ui-li-heading">
                                            Avery Walker</h3>
                                        <p class="ui-li-desc">
                                            Sure, let's plan on meeting at Highland Kitchen at 8:00 tonight. Can't wait!
                                        </p>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li data-theme="c" class="ui-btn ui-btn-icon-right
ui-li ui-btn-up-c">
                            <div class="ui-btn-inner ui-li">
                                <div class="div-workitem">
                                    <div class="txt-workitem-unfinished" style="height: 60%;">
                                    </div>
                                    <div class="txt-workitem-expired" style="height: 10%;">
                                    </div>
                                    <div class="txt-workitem-finished" style="height: 30%;">
                                    </div>
                                </div>
                                <div class="ui-btn-text">
                                    <a href="index.html" class="ui-link-inherit">
                                        <h3 class="ui-li-heading">
                                            天使艾米丽</h3>
                                        <p class="ui-li-desc">
                                            4-for-3 Store, you may be
                                        </p>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li data-theme="c" class="ui-btn ui-btn-icon-right
ui-li ui-btn-up-c">
                            <div class="ui-btn-inner ui-li">
                                <div class="div-workitem">
                                    <div class="txt-workitem-unfinished" style="height: 30%;">
                                    </div>
                                    <div class="txt-workitem-expired" style="height: 30%;">
                                    </div>
                                    <div class="txt-workitem-finished" style="height: 40%;">
                                    </div>
                                </div>
                                <div class="ui-btn-text">
                                    <a href="index.html" class="ui-link-inherit">
                                        <h3 class="ui-li-heading">
                                            罗丹的情人</h3>
                                        <p class="ui-li-desc">
                                            As someone who has purchased children's
                                        </p>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li data-theme="c" class="ui-btn
ui-btn-icon-right ui-li ui-btn-up-c">
                            <div class="ui-btn-inner ui-li">
                                <div class="div-workitem">
                                    <div class="txt-workitem-unfinished" style="height: 10%;">
                                    </div>
                                    <div class="txt-workitem-expired" style="height: 20%;">
                                    </div>
                                    <div class="txt-workitem-finished" style="height: 70%;">
                                    </div>
                                </div>
                                <div class="ui-btn-text">
                                    <div class="ui-li-aside ui-li-desc txt-diff">
                                        <strong>剩余2天</strong></div>
                                    <a href="index.html" class="ui-link-inherit">
                                        <h3 class="ui-li-heading">
                                            黑暗中的舞者</h3>
                                        <p class="ui-li-desc">
                                            you may be interested in these featured books.</p>
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li data-theme="c" class="ui-btn ui-btn-icon-right ui-li
ui-btn-up-c">
                            <div class="ui-btn-inner ui-li">
                                <div class="div-workitem">
                                    <div class="txt-workitem-unfinished" style="height: 20%;">
                                    </div>
                                    <div class="txt-workitem-expired" style="height: 20%;">
                                    </div>
                                    <div class="txt-workitem-finished" style="height: 60%;">
                                    </div>
                                </div>
                                <div class="ui-btn-text">
                                    <div class="ui-li-aside ui-li-desc txt-diff">
                                        <strong>剩余19天</strong></div>
                                    <a href="index.html" class="ui-link-inherit">
                                        <h3 class="ui-li-heading">
                                            情人</h3>
                                        <p class="ui-li-desc">
                                            游戏界面由iPhone拍摄的实景模拟而成</p>
                                    </a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--/content-primary -->
            </div>
            <!-- /content -->
        </div>
    </div>
</body>
<!-- #include file="../../Page/template.html" -->
</html>
